<template>
    <div class="add-follow-dialog-view">

        <el-dialog
                v-model="dialogShow"
                :close-on-click-modal="false"
                width="500px"
                title="写跟进"
                @closed="close"
        >

            <el-form
                    :rules="rule"
                    ref="refForm"
                    :model="formData"
                    label-width="100px"
                    size="small"
            >

                <el-form-item label="产品信息" v-if="mode == 'client'">
                    <span>{{getProductName(datas)}}</span>
                </el-form-item>

                <el-form-item label="客户名称" v-if="mode == 'client'">
                    <span>{{datas.objectName}}</span>
                </el-form-item>

                <el-form-item label="负责跟进职员">
                    <span>{{userInfo.realName}}</span>
                </el-form-item>

                <el-form-item label="跟进形式">
                    <el-select
                            v-model="formData.visitForm"
                            style="width: 100%"
                            placeholder="请选择跟进形式">
                        <el-option
                                v-for="item in formOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="跟进联系人" v-if="mode == 'client'" prop="contactId">
                    <div style="display: flex;align-items: center">
                        <el-select
                                v-model="formData.contactId"
                                style="width: 100%"
                                @change="contactChange"
                                placeholder="请选择跟进联系人">
                            <el-option
                                    v-for="item in contactOptions"
                                    :key="item.id"
                                    :label="item.linkmanName"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>

                        <el-button type="text" @click="onCreate" style="margin: 0 10px">新建联系人</el-button>
                    </div>

                </el-form-item>

                <el-form-item label="跟进内容" prop="content">
                    <el-input v-model="formData.content" placeholder="请输入跟进内容" :rows="2" type="textarea"/>
                </el-form-item>

            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                            class="border-btn"
                            size="small"
                            @click="close"
                    >取消</el-button>
                    <el-button
                            class="main-btn"
                            size="small"
                            type="primary"
                            @click="confirm"
                    >确定</el-button>
                </div>
            </template>
        </el-dialog>

        <addContact ref="addContact" :id="datas.objectId" :type="datas.customerType" @success="getContact"/>
    </div>
</template>

<script>
    import {crmStore} from "../../../../store";
    import { defineComponent, defineAsyncComponent, reactive, toRefs, inject, getCurrentInstance, ref } from 'vue'
    export default defineComponent({
        name: "addFollowDialog",
        components:{
            addContact:defineAsyncComponent(()=>import('./addContact.vue'))
        },
        emits:['success'],
        props:{
            datas:{
                type:Object,
                default:{}
            },
            mode:{
                type:String,
                default:'clue'
            }
        },
        setup(props,{emit}){
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const formOptions = crmStore.getters['dictionary/getDictionary']['visit_form']
            const userInfo = crmStore.getters['user/userInfo']
            const rule = ref({
                content:[
                    {
                        required: true,
                        message:'请输入跟进内容',
                        trigger: 'blur',
                    },
                ],
                contactId:[
                    {
                        required: true,
                        message:'请选择跟进联系人',
                        trigger: 'change',
                    },
                ]
            })

            var data = reactive({
                dialogShow:false,
                refForm:null,
                formData:{
                    content:'',
                    visitForm:'1',
                    contactId:'',
                    contactName:'',
                    registerCustomerId:'',
                    clueId:'',
                },
                contactOptions:[],
                addContact:null,
            })

            const contactChange = () => {
                let index = data.contactOptions.findIndex(a=>a.id == data.formData.contactId)
                if (index != -1){
                    data.formData.contactName = data.contactOptions[index].linkmanName
                }
            }

            const close = () => {
                data.contactOptions = []
                data.dialogShow = false
                data.formData = {
                    content:'',
                    visitForm:'1',
                    contactId:'',
                    contactName:'',
                    registerCustomerId:'',
                    clueId:'',
                }
                setTimeout(()=>{
                    data.refForm.clearValidate()
                },500)
            }

            const confirm = () => {
                data.refForm.validate((val)=>{
                    if (val){
                        if (props.mode == 'clue'){
                            let a = {
                                clueId:props.datas.id,
                                visitForm:data.formData.visitForm,
                                content:data.formData.content,
                            }
                            api.task.TASK_CLUE_WRIT_FOLLOW(a).then(res=>{
                                if (!res.code){
                                    currentInstance.proxy.customMessage({type:'success',message:'创建成功'})

                                    emit('success')
                                    close()
                                }else {
                                    currentInstance.proxy.customMessage({type:'error',message:res.msg})
                                }
                            })
                        }else if (props.mode == 'client') {
                            let a = {
                                registerCustomerId:props.datas.id,
                                visitForm:data.formData.visitForm,
                                content:data.formData.content,
                                contactName:data.formData.contactName,
                                contactId:data.formData.contactId,
                            }
                            api.task.TASK_CUSTOMER_WRIT_FOLLOW(a).then(res=>{
                                if (!res.code){
                                    currentInstance.proxy.customMessage({type:'success',message:'创建成功'})

                                    emit('success')
                                    close()
                                }else {
                                    currentInstance.proxy.customMessage({type:'error',message:res.msg})
                                }
                            })
                        }
                    }
                })
            }

            const onCreate = () => {
                data.addContact.open()
            }

            const open = () => {
                data.dialogShow = true

                getContact()
            }

            const getContact = () => {
                let type = ''
                if (props.datas.customerType == 1){
                    type = 'agent'
                }else if (props.datas.customerType == 2){
                    type = 'seller'
                }else if (props.datas.customerType == 3){
                    type = 'terminal'
                }
                const queryParams = {
                    relationId: Number(props.datas.objectId),
                    modelType: type,
                    pageSize: 100,
                    page: 1,
                }

                api.terminal.CONTACT_LIST(queryParams).then((res) => {
                    if (res.code === 0) {
                        data.contactOptions = res.data.list || []
                    }
                })
            }

            return{
                ...toRefs(data),
                formOptions,
                userInfo,
                rule,

                close,
                confirm,
                open,
                onCreate,
                contactChange,
                getContact,
            }
        }
    })
</script>

<style scoped>

</style>
